<template>
	<div>
		<div class="breadcrumb">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>{{$store.state.company.companyName}}</el-breadcrumb-item>
				<el-breadcrumb-item>智能装备</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path:`/IntelligentEquipment/myEquipment/sensor?t=${new Date().getTime()}`}">器件设备</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="tableNavBox">
			<div class="tableBoxTable" style="margin-bottom: 50px;">
				<div class="menberConTitle flex" style="justify-content: space-between;">
					<div class="tableTitle">配件基本信息</div>
				</div>
				<formTemplate :formSet="formSet1" :postData="formData1" class="baseadd">
					<template slot="groupName" slot-scope="scope">
						<el-form-item label="产品分组：" style="width:550px">
							<el-select
  							  	v-model="formData1.groupName"
  							  	filterable
  							  	allow-create
  							  	placeholder="请输入"
  							  	:loading="loading"
								style="width:500px"
								@change="handleChange">
  							  	<el-option
  							  	  v-for="(item,index) in optionData.groupName"
  							  	  :key="index"
  							  	  :label="item.name"
  							  	  :value="item.value">
  							  	</el-option>
  							</el-select>
						</el-form-item>
            		</template>
				</formTemplate>

				<div class="menberConTitle flex" style="justify-content: space-between;">
					<div class="tableTitle">供应商信息</div>
				</div>
				<formTemplate :formSet="formSet2" :postData="formData1" class="baseadd" :optionData="optionData" @radioInputChange='radioInputChange'>
					<template slot="price" slot-scope="scope">
						<div style="display:flex; justify-content:flex-start;">
							<el-form-item label="预算单价：" style="width:550px;">
								<el-input v-model="formData1.price" style="width:420px;"></el-input>
							</el-form-item>
							<el-checkbox v-model="formData1.isPrice" :true-label="1" :false-label="0" checked style="width:100px;padding-top:5px">公开</el-checkbox>
						</div>
            		</template>
				</formTemplate>

				<div class="menberConTitle flex" style="justify-content: space-between;">
					<div class="tableTitle">控制信号配置</div>
				</div>
				<tableForm v-if="update" :pageData="partsInfo0" :data="tableSet" :addNew="false" :optionData="optionData" @selectChange='selectChange'>
					<template slot="m" slot-scope="scope">
					<div style="display:flex; justify-content:space-around;font-weight:bold;">
						<p style="color:red;cursor: pointer;" @click="partsInfo0.items.splice(scope.row.$index,1)">删除</p>
					</div>
				</template>
				</tableForm>
				<el-button type="primary" @click="partsInfo0.items.push({})" style="margin:10px 0 0 10px; ">新增控制信号</el-button>

				<div class="menberConTitle flex" style="justify-content: space-between; margin-buttom:5px">
					<div class="tableTitle">设备图片信息</div>
				</div>
				<div style="margin:0 20px">
					<el-upload
					  	:action="$api.uploadDeviceFile"
					  	list-type="picture-card"
						:file-list="files"
					  	:on-success="handleSuccess"
					  	:on-remove="handleRemove">
						<i class="el-icon-plus icon1" ></i>
						<p class="text1">请上传设备图片</p>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible">
					  <img width="100%" :src="dialogImageUrl" alt="">	
					</el-dialog>
				</div>

				<div class="menberConTitle flex" style="justify-content: space-between; margin-buttom:5px">
					<div class="tableTitle">设备配件信息</div>
				</div>
				<tableForm v-if="update2" :pageData="partsInfo" :data="tableSet2" :addNew="false" :optionData="optionData" >
					<template slot="m" slot-scope="scope">
						<div style="display:flex; justify-content:space-around;font-weight:bold;">
							<p style="color:#67C23A;cursor: pointer;" @click="selectFittings(scope.row,scope.row.$index)">选择</p>
							<p style="color:red;cursor: pointer;" @click="partsInfo.items.splice(scope.row.$index,1)">删除</p>
						</div>
					</template>
				</tableForm>
				<el-button type="primary" @click="partsInfo.items.push({})" style="margin:10px 0 0 10px; ">新增设备配件</el-button>

				<div class="menberConTitle flex" style="justify-content: space-between; margin-buttom:5px">
					<div class="tableTitle">配件特征</div>
				</div>
				<el-input
				  	type="textarea"
				  	:rows="6"
				  	placeholder="请输入内容"
				  	v-model="formData1.equipmentFeature"
				  	style="padding:0 20px">
				</el-input>
			</div>
			<div class="btnBox">
				<el-button round @click="$router.go(-1)">返回</el-button>
				<el-button type="primary" round @click="submitData">保存</el-button>
				<el-button type="danger" v-if="isDetail == true" round @click="deleteData">删除</el-button>
			</div>
		</div>

		<el-dialog
		  title="请选择数字配件"
		  :visible.sync="dialogVisibleSel"
		  width="670px"
		  class="dialog">
		  	<formTemplate ref="form" :formSet="formSet3" :postData="formDig" :optionData="optionDataDig"  :isDialog="true"  @flag="save" @close="close"></formTemplate>
		</el-dialog>

	</div>
</template>

<script>
	import formTemplate from '@/components/form.vue'
	import tableForm from '@/components/tableForm.vue'
	export default {
		components: {
			tableForm,
			formTemplate
		},
		data() {
			return {
				dialogVisible:false,
				dialogImageUrl: '',
				files:[],
				dialogVisibleSel:false,//弹框
				update:true,//强制刷新
				update2:true,
				formSet1:[
                    { span: 24, label: '设备分组：', prop: 'groupName', type: 'slot', disabled:false ,labelWidth:'550px'},
                    { span: 24, label: '设备名称：', prop: 'equipmentName', type: 'input' , disabled:false,labelWidth:'550px'},
                    { span: 24, label: '设备参数描述：', prop: 'equipmentDesc', type: 'input',labelWidth:'550px'},
                ],
				formSet2:[
                    { span: 24, label: '配件供应商：', prop: 'supplierName', type: 'radio_custom', disabled:false ,labelWidth:'550px'},
                    { span: 24, label: '产品型号：', prop: 'equipmentModel', type: 'radio_custom' , disabled:false,labelWidth:'550px'},
                    { span: 24, label: '采购网址：', prop: 'supplierUrl', type: 'input',labelWidth:'550px'},
                    { span: 24, label: '计量单位：', prop: 'company', type: 'input',labelWidth:'550px'},
                    { span: 24, label: '预算单价：', prop: 'price', type: 'slot',labelWidth:'550px'},
                ],
				formSet3:[
                    { span: 24, label: '配件分组：', prop: 'groupId', type: 'select', disabled:false ,labelWidth:'500px',placeholder:'请先选择分组'},
                    { span: 24, label: '配件名称：', prop: 'equipmentName', type: 'select' , disabled:false,labelWidth:'500px'},
                    { span: 24, label: '配件型号：', prop: 'equipmentModel', type: 'select',labelWidth:'500px'},
                    // { span: 24, label: '设备特征：', prop: 'company', type: 'textarea', disabled:true, rows:4 ,labelWidth:'500px', style:'width:125%'},
                ],
				tableSet:[
					{ label: '端口类型', prop: 'signalsPort', type: 'select', disabled:false, placeholder:'请先选择端口'},
					{ label: '通道编号', prop: 'channelIdentifier', type: 'input', disabled:false,placeholder:'请输入通道编号'},
					{ label: '通道名称', prop: 'channelName', type: 'input', disabled:false, placeholder:'请输入通道名称'},
					{ label: '信号类型', prop: 'signalsType', type: 'select_form', disabled:false},
					{ label: '操作', prop: 'm', type: 'slot' , },
				],
				tableSet2:[
					{ label: '配件型号', prop: 'equipmentModel', type: 'text', disabled:false, },
					{ label: '配件名称', prop: 'equipmentName', type: 'text', disabled:false,placeholder:'请输入通道编号'},
					{ label: '配件供应商', prop: 'supplierName', type: 'text', disabled:false, placeholder:'请输入通道名称'},
					{ label: '配件规格', prop: 'equipmentDesc', type: 'text', disabled:false},
					{ label: '配件数量', prop: 'amounts', type: 'input', disabled:false},
					{ label: '单位', prop: 'company', type: 'text', disabled:false},
					{ label: '操作', prop: 'm', type: 'slot' , },
				],
				rules: {
        		    number: { required: true, message: '不能为空', trigger: 'blur' },     
        		}, 
				formData1:{
					equipmentImageEntities:[]
				},
				formDig:{
					groupId:'',
					equipmentModel:'',
					equipmentName:'',
				},
				partsInfo:{items:[]},
				partsInfo0:{items:[]},
				companyId: this.$store.state.company.companyId,
				companyName: this.$store.state.company.companyName,
				userId: '',
				optionData:{
					custom:{
						supplierName:{},
						equipmentModel:{},
					},
					signalsPort:[],
					signalsType:[],
					supplierName:[{label:'备选1',value:'1'},{label:'备选2',value:'2'},],
					equipmentModel:[],
				},
				optionDataDig:{},
				listDig:{
					index:0,
					datas:[]
				},//弹框下拉暂存
				loading:false,
				isDetail:false, // 是否为详情页
			}
		},
		created() {
			this.$store.commit('digitalOrchard_leftNavIndex', 11)
			this.getGroup('INSTRUMENTSEQUIPMENT')
			this.getPartsSuppliers()  
			this.getDictionary('PORTTYPE','signalsPort') //字典
			if(this.$route.query.id){
				this.getDeviceEquipmentByID(this.$route.query.id)
			}
		},
		mounted() {
		},
		watch: {
			'formData1.supplierName'(e){
				if(this.formData1.supplierName){
					this.getModelBySuppliers()
				}
			},
			'formDig.groupId'(e){
				if(this.formDig.groupId){
					this.$request.get(this.$api.getEquipmentName, {
						companyId:this.companyId,
						groupId:this.formDig.groupId,
					}).then(res=>{
						if(res.code == 200){
							let a = res.data.map(item =>{
								return{
									name:item,
									value:item
								}
							})
							this.$set(this.optionDataDig,'equipmentName',a)
						}
					})
				}
			},
			'formDig.equipmentName'(e){
				if(this.formDig.equipmentName){
					this.$request.get(this.$api.getEquipmentModel, {
						companyId:this.companyId,
						groupId:this.formDig.groupId,
						equipmentName:this.formDig.equipmentName
					}).then(res=>{
						if(res.code == 200){
							this.listDig.data  = res.data
							let a = res.data.map(item =>{
								return{
									name:item.equipmentModel,
									value:item.equipmentModel
								}
							})
							this.$set(this.optionDataDig,'equipmentModel',a)
						}
					})
				}
			}
		},
		methods: {
			deleteData(){
				this.$confirm('确定要删除吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$request.postForm(this.$api.deleteDeviceEquipment, {
						id:this.formData1.id,
					}).then(res=>{
							if(res.code == 200){
								this.$message.success(res.message)
								this.$router.push(`/IntelligentEquipment/myEquipment/sensor?t=${new Date().getTime()}`)
							}
					})
				})
			},
			getDeviceEquipmentByID(e){
				this.$request.get(this.$api.getDeviceEquipmentByID, {
					id:e,
				}).then(res=>{
						if(res.code == 200){
							this.formData1 = res.data
							this.partsInfo0.items = res.data.signalsInfoEntities
							this.partsInfo.items = this.formData1.partsInfoEntities 
							this.files = this.formData1.equipmentImageEntities.map(item =>{
								return {
									url: item.imageUrl
								}
							})
							this.isDetail = true
						}
					})
			},
			radioInputChange(e){//radio自定义强制选中刷新
				this.$set(this.formData1,e.prop,e.e);
			},
			getDictionary(e,prop,index){
				let that = this
				let signalsPortData = this.getDictionaryByType(e)
				signalsPortData.then(function (res) { 
					that.update = false
					if(prop == 'signalsPort'){
						that.optionData.signalsPort = res.map(item =>{
							return{
								name:item.dictValue,
								value:item.dictCode
							}
						})
					}else if(prop == 'signalsType'){
						that.optionData.signalsType[index] = res.map(item =>{
							return{
								name:item.dictValue,
								value:item.dictCode
							}
						})
					}
					that.$nextTick(() => {
	            	    that.update = true
	            	})
				})
			},
			selectChange(e){
				if(e.prop == 'signalsPort'){
					this.getDictionary(e.id,'signalsType',e.index)
				}
			},
			handleChange(e){
				let flag = false
				if(this.optionData.groupName){
					this.optionData.groupName.forEach(item => {
						if(item.value == e){
							flag = true
							this.formData1.groupId = e
							this.formData1.groupName = item.name
						}
					});
				}
				if(flag === false){
					this.formData1.groupId = ''
					// this.duplicateQueryGroupName(this.formData1.groupName,'IMAGEMENTEQUIPMENT',this.companyId)
				}
			},
			submitData(){
				console.log(this.isDetail);
				this.formData1.companyId = this.companyId
				this.formData1.userId = this.userId
				this.formData1.partsInfoEntities = this.partsInfo.items
				this.formData1.signalsInfoEntities = this.partsInfo0.items
				if(this.isDetail){
					this.$request.postForm(this.$api.updateDeviceEquipment, {
						deviceEquipmentVO:JSON.stringify(this.formData1)}).then(res=>{
						if(res.code == 200){
							this.$message.success(res.message)
							this.$router.push(`/IntelligentEquipment/myEquipment/sensor?t=${new Date().getTime()}`)
						}
					})
				}else{
					this.$request.postForm(this.$api.saveDeviceEquipment, {
						deviceEquipmentVO:JSON.stringify(this.formData1)}).then(res=>{
						if(res.code == 200){
							this.$message.success(res.message)
							this.$router.push(`/IntelligentEquipment/myEquipment/sensor?t=${new Date().getTime()}`)
						}
					})
				}
			},
			//上传
			handleRemove(file, fileList) {
      		  console.log(file, fileList);
      		},
			handleSuccess(file,fileList) {
      		  	// this.dialogImageUrl.push({imageUrl:file.data});
      		  	this.dialogImageUrl = file.data
				this.formData1.equipmentImageEntities.push({imageUrl:file.data})
      		},
			selectFittings(data,index){
				this.getGroup('DIGITALACCESSORIES','1')
				this.listDig.index = index
				this.dialogVisibleSel = true
			},
			save(flag){
				this.listDig.data.forEach(item =>{
					if(item.equipmentModel == this.formDig.equipmentModel){
						this.$set(this.partsInfo.items,this.listDig.index,item);
					}
				})
				this.dialogVisibleSel = false
			},
			close(e){
				if(e == false){
					this.formDig = {}
					this.dialogVisibleSel = false
				}
			},
			getModelBySuppliers(){
				this.$request.postForm(this.$api.getModelBySuppliers, {
					companyId:this.companyId,
					equipType:'INSTRUMENTSEQUIPMENT',
					suppliers:this.formData1.supplierName
				}).then(res=>{
					if(res.code == 200){
						let a = []
						a = res.data.map(item =>{
							return{
								label:item,
								value:item
							}
						})
						this.$set(this.optionData,'equipmentModel',a)
					}
				})
			},
			duplicate(e){ //去重
				e = e.filter(item => item)
				let map = new Map()
        		for (let i of e) {
        		  if (!map.has(i.value)) {
        		    map.set(i.value, i)
        		  }
        		}
        		e = [...map.values()]
				return e
			},
			getPartsSuppliers(){
				this.$request.postForm(this.$api.getPartsSuppliers, {
					companyId:this.companyId,
					equipType:'INSTRUMENTSEQUIPMENT'
				}).then(res=>{
					if(res.code == 200){
						let a = []
						a = res.data.map(item =>{
							return{
								label:item,
								value:item
							}
						})
						this.$set(this.optionData,'supplierName',a)
					}
				})
			},
			getGroup(e,i){
				this.$request.postForm(this.$api.getGroup, {
					companyId:this.companyId,
					groupType:e
				}).then(res=>{
						if(res.code == 200){
							let a = res.data.map(item =>{
								return{
									name:item.groupName,
									value:item.id
								}
							})
							if(i === '1'){
								this.$set(this.optionDataDig,'groupId',a)
							}else{
								this.$set(this.optionData,'groupName',a)
							}
						}
					})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.breadcrumb,
	.tableNavBox {
		padding: 20px;
	}

	.tableNavBox {
		padding-top: 0;
		
	}
	.dialog{
	}
	.tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}

	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		margin-bottom: 15px;
		margin-top: 10px;
	}

	.dialogVisible>>>.el-input__inner {
		width: 270px;
	}

	.btnBox {
		width: 100%;
		padding-top: 15px;
		border-top: 1px solid #DCDCDC;
		text-align: center;
		.el-button{
			width: 120px;
			margin-right: 5px;
		}
	}
	.icon1{
		float: left;
		margin: 40px 0 -35px 58px
	}
	.text1{
		float: left;
		margin: 0 0 0 25px;
		height: 50px;
		color: #95a0ac;
	}
</style>
